<template>
    <div class="habit-carousel" h-full>
        <div class="habit-container flex-center" w-full h-full v-if="size == '1x1'">
            <span>0/8</span>
            <i class="refresh-icon flex-center" title="重置">
                <el-icon size="14" color="var(--d-main)">
                    <Refresh />
                </el-icon>
            </i>
            <i class="add-icon flex-center" title="+">
                <el-icon size="14" color="var(--d-main)">
                    <Plus />
                </el-icon>
            </i>
        </div>
        <div class="habit-container flex-center" w-full h-full v-if="size == '1x2'">
            <div class="flex-between flex-x" w-full pl5 pr5>
                <div class="progress-part">
                    <svg class="progress-svg">
                        <circle stroke="rgba(var(--alpha-color),.1)" class="progress-circle"></circle>
                        <circle stroke="var(--primary-color)" stroke-dasharray="calc(2*3.1415*var(--r)/8),1000"
                            class="progress-circle"></circle>
                    </svg>
                </div>
                <div class="habit-text">
                    <p fs-12 fw-400>每天喝8杯水</p>
                    <p style="text-align: left;">0/8</p>
                </div>
                <i class="refresh-icon flex-center" style="left: 20px;" title="重置">
                    <el-icon size="14" color="var(--d-main)">
                        <Refresh />
                    </el-icon>
                </i>
                <i class="add-icon flex-center" style="right: 20px;" title="+">
                    <el-icon size="14" color="var(--d-main)">
                        <Plus />
                    </el-icon>
                </i>
            </div>
        </div>
        <div class="habit-container flex-center" w-full h-full v-if="size == '2x1'">
            <div class="flex-between flex-column" style="align-items: center;padding:10px 0" h-full>
                <div class="progress-part">
                    <svg class="progress-svg">
                        <circle stroke="rgba(var(--alpha-color),.1)" class="progress-circle"></circle>
                        <circle stroke="var(--primary-color)" stroke-dasharray="calc(2*3.1415*var(--r)/8),1000"
                            class="progress-circle"></circle>
                    </svg>
                </div>
                <div class="habit-text tc">
                    <p fs-12 fw-400>每天喝8杯水</p>
                    <p>0/8</p>
                </div>
                <i class="refresh-icon flex-center" title="重置">
                    <el-icon size="14" color="var(--d-main)">
                        <Refresh />
                    </el-icon>
                </i>
                <i class="add-icon flex-center" title="+">
                    <el-icon size="14" color="var(--d-main)">
                        <Plus />
                    </el-icon>
                </i>
            </div>
        </div>
        <div class="habit-container flex-center" w-full h-full v-if="size == '2x2'">
            2x2
        </div>
        <div class="habit-container flex-center" w-full h-full v-if="size == '2x4'">
            2x4
        </div>

    </div>
</template>

<script setup lang="ts">
import { Plus, Refresh } from '@element-plus/icons-vue'

const props = defineProps<{
    size: String,
    id?:String
}>()
</script>

<style scoped lang="scss">
.habit-carousel {
    background: #fff;
    .habit-container {
        padding: 8px;
        color: #000;
        font-weight: 700;
        font-size: 14px;
        position: relative;

        &:hover {
            .refresh-icon {
                display: flex;
            }

            .add-icon {
                display: flex;
            }
        }

        .refresh-icon {
            border-radius: 50%;
            width: 25px;
            height: 25px;
            background-color: rgb(var(--alpha-bg));
            position: absolute;
            left: 5px;
            bottom: 5px;
            box-shadow: 0 0 5px 0 rgba(var(--alpha-color), .17);
            cursor: pointer;
            display: none;
            transition: all .2s;

            &:hover {
                background-color: #f56c6c;
            }
        }

        .add-icon {
            border-radius: 50%;
            width: 25px;
            height: 25px;
            background-color: rgb(var(--alpha-bg));
            position: absolute;
            right: 5px;
            bottom: 5px;
            box-shadow: 0 0 5px 0 rgba(var(--alpha-color), .17);
            cursor: pointer;
            display: none;
            transition: all .2s;

            &:hover {
                background-color: #0092fb;

            }
        }

        //1x2
        .progress-part {
            --size: 40px;
            --border-width: 4px;
            height: var(--size);
            width: var(--size);
            border-radius: 50%;
            position: relative;

            .progress-svg {
                height: 100%;
                width: 100%;
                transform: rotate(-90deg);

                .progress-circle {
                    --r: calc(var(--size)/2 - var(--border-width)/2);
                    r: var(--r);
                    cx: calc(var(--size)/2);
                    cy: calc(var(--size)/2);
                    fill: none;
                    stroke-width: var(--border-width);
                    transition: stroke-dasharray .4s linear, stroke .3s;
                }
            }
        }
    }
}
</style>